<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社管理系统 - 客户管理</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav 
                    current-page="customers"
                    @logout="handleLogout">
                </sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">客户管理</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <button type="button" class="btn btn-primary" @click="showCreateModal">
                                <i class="bi bi-plus"></i> 新增客户
                            </button>
                        </div>
                    </div>

                    <!-- 客户列表 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>客户编号</th>
                                    <th>公司名称</th>
                                    <th>姓名</th>
                                    <th>显示名称</th>
                                    <th>性别</th>
                                    <th>客户等级</th>
                                    <th>工作区</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="customer in customers" :key="customer.ID">
                                    <td>{{ customer.LegacyCustomerNo }}</td>
                                    <td>{{ customer.CompanyName }}</td>
                                    <td>{{ customer.Name }}</td>
                                    <td>{{ customer.DisplayName }}</td>
                                    <td>{{ customer.Sex }}</td>
                                    <td>{{ customer.CustomerLevel }}</td>
                                    <td>{{ getWorkareaName(customer.work_area_id) }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary me-1" @click="showEditModal(customer)">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-info" @click="showDetailModal(customer)">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 新增/编辑客户模态框 -->
                    <div class="modal fade" id="customerModal" tabindex="-1" ref="customerModal">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ isEditing ? '编辑客户' : '新增客户' }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <form @submit.prevent="handleSubmit">
                                        <div class="row">
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">客户编号 *</label>
                                                <input type="text" class="form-control" v-model="form.LegacyCustomerNo" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">公司名称 *</label>
                                                <input type="text" class="form-control" v-model="form.CompanyName" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">姓名 *</label>
                                                <input type="text" class="form-control" v-model="form.Name" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">显示名称 *</label>
                                                <input type="text" class="form-control" v-model="form.DisplayName" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">性别 *</label>
                                                <select class="form-select" v-model="form.Sex" required>
                                                    <option value="男">男</option>
                                                    <option value="女">女</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">生日 *</label>
                                                <input type="date" class="form-control" v-model="form.Birthday" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">客户等级 *</label>
                                                <select class="form-select" v-model="form.CustomerLevel" required>
                                                    <option value="普通">普通</option>
                                                    <option value="VIP">VIP</option>
                                                    <option value="VVIP">VVIP</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">工作区</label>
                                                <select class="form-select" v-model="form.work_area_id" required>
                                                    <option v-for="workarea in workareas" :key="workarea.ID" :value="workarea.ID">
                                                        {{ workarea.Name }}
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-12 mb-3">
                                                <label class="form-label">备注</label>
                                                <textarea class="form-control" v-model="form.Memo" rows="2"></textarea>
                                            </div>
                                            <hr>
                                            <h6>PDF信息</h6>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF姓名 *</label>
                                                <input type="text" class="form-control" v-model="form.PDFName" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF电话 *</label>
                                                <input type="text" class="form-control" v-model="form.PDFTelNo" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF地址 *</label>
                                                <input type="text" class="form-control" v-model="form.PDFAddress" required>
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">PDF邮箱 *</label>
                                                <input type="email" class="form-control" v-model="form.PDFEmail" required>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="handleSubmit" :disabled="isSubmitting">
                                        {{ isSubmitting ? '保存中...' : '保存' }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                customers: [],
                workareas: [],
                isEditing: false,
                isSubmitting: false,
                form: {
                    LegacyCustomerNo: '',
                    CompanyName: '',
                    Name: '',
                    DisplayName: '',
                    Sex: '男',
                    Birthday: '',
                    CustomerLevel: '普通',
                    work_area_id: null,
                    Memo: '',
                    PDFName: '',
                    PDFTelNo: '',
                    PDFAddress: '',
                    PDFEmail: ''
                },
                modal: null
            },
            created() {
                this.loadCustomers();
                this.loadWorkareas();
            },
            mounted() {
                this.modal = new bootstrap.Modal(this.$refs.customerModal);
            },
            methods: {
                async loadCustomers() {
                    try {
                        const response = await window.apiClient.get('/customers');
                        this.customers = response.data;
                    } catch (error) {
                        console.error('加载客户列表失败:', error);
                        alert('加载客户列表失败');
                    }
                },
                async loadWorkareas() {
                    try {
                        const response = await window.apiClient.get('/workarea');
                        this.workareas = response.data;
                    } catch (error) {
                        console.error('加载工作区列表失败:', error);
                    }
                },
                getWorkareaName(id) {
                    const workarea = this.workareas.find(w => w.ID === id);
                    return workarea ? workarea.Name : '-';
                },
                showCreateModal() {
                    this.isEditing = false;
                    this.form = {
                        LegacyCustomerNo: '',
                        CompanyName: '',
                        Name: '',
                        DisplayName: '',
                        Sex: '男',
                        Birthday: '',
                        CustomerLevel: '普通',
                        work_area_id: null,
                        Memo: '',
                        PDFName: '',
                        PDFTelNo: '',
                        PDFAddress: '',
                        PDFEmail: ''
                    };
                    this.modal.show();
                },
                showEditModal(customer) {
                    this.isEditing = true;
                    this.form = { ...customer };
                    // 格式化日期
                    if (this.form.Birthday) {
                        this.form.Birthday = new Date(this.form.Birthday).toISOString().split('T')[0];
                    }
                    this.modal.show();
                },
                async handleSubmit() {
                    try {
                        this.isSubmitting = true;
                        if (this.isEditing) {
                            await window.apiClient.put(`/customers/${this.form.ID}`, this.form);
                        } else {
                            await window.apiClient.post('/customers', this.form);
                        }
                        this.modal.hide();
                        this.loadCustomers();
                    } catch (error) {
                        console.error('保存客户失败:', error);
                        alert('保存客户失败');
                    } finally {
                        this.isSubmitting = false;
                    }
                },
                handleLogout() {
                    auth.logout();
                }
            }
        });
    </script>
</body>
</html> 